<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="css/bootstrap.min.css">

<body style="padding: 30px;">

    <!-- 实现CURD按键 -->
    <form class="form-inline">
            <button class="btn btn-primary "  data-toggle="modal" data-target="#myModal" type="button">新增</button>
            <button class="btn btn-primary" id="del" type="button">删除</button>
            <button class="btn btn-primary" id="updata" type="button">编辑</button>
            <button class="btn btn-primary"  id="select" type="button">查询</button>
            <input class="form-control" type="text" name="" id="selectId" placeholder="按工号查询">
            <input class="form-control" type="text" name="" id="selectName" placeholder="按姓名查询">
        
    </form>

    <!-- 声明定义模态框组件 -->
    <div class="modal" id="myModal" data-backdrop="static">
        <!-- 窗口声明 -->
        <div class="modal-dialog">
            <!-- 内容声明 -->
            <div class="modal-content">
                <!-- 1.框的标题 -->
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4 class="modal-title">添加用户</h4>
                </div>
                <!-- 2.框内信息 -->
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label>工号</label>
                            <input type="text" class="form-control" id="id">
                        </div>

                        <div class="form-group">
                            <label>姓名</label>
                            <input type="text" class="form-control" id="name">
                        </div>
                        <div class="form-group">
                            <label>性别</label>
                            <input type="text" class="form-control" id="sex">
                        </div>
                        <div class="form-group">
                            <label>密码</label>
                            <input type="text" class="form-control" id="password">
                        </div>
                        <div class="form-group">
                            <label>年龄</label>
                            <input type="text" class="form-control" id="age">
                        </div>
                        <div class="form-group">
                            <label>出生日期</label>
                            <input type="text" class="form-control" id="birthday">
                        </div>
                        <!-- 3.框的按钮 -->
                        <div class="modal-footer">
                            <button class="btn btn-info" data-dismiss="modal" id="add">提交</button>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>


    <!-- 表格显示员工信息-->
    <table class="table table-hover">
        <caption>习题</caption>

        <thead>
            <tr>
                <th>序号</th>
                <th>工号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>密码</th>
                <th>年龄</th>
                <th>出生日期</th>
            </tr>
        </thead>
        <tbody>
            <tr class="info">
                <td><input type="checkbox"></td>
                <td>1001</td>
                <td>张三</td>
                <td>女</td>
                <td>1234</td>
                <td>29</td>
                <td>1991-1-1</td>
            </tr>
            <tr class="warning">
                <td><input type="checkbox"></td>
                <td>1002</td>
                <td>李四</td>
                <td>男</td>
                <td>1234</td>
                <td>28</td>
                <td>1992-2-2</td>
            </tr>
            <tr class="info">
                <td><input type="checkbox"></td>
                <td>1003</td>
                <td>王五</td>
                <td>女</td>
                <td>1234</td>
                <td>29</td>
                <td>1993-3-3</td>
            </tr>
            <tr class="warning">
                <td><input type="checkbox"></td>
                <td>1004</td>
                <td>赵六</td>
                <td>女</td>
                <td>1234</td>
                <td>29</td>
                <td>1994-4-4</td>
            </tr>

        </tbody>

    </table>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <script src="js/test.js"></script>
    <script>

    </script>
</body>

</html>